﻿<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Sign In - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
    <style>
        .alert {
            padding: 10px 15px;
            margin-bottom: 15px;
            border-radius: 4px;
            font-size: 14px;
        }
        .alert-success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .alert-danger {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
</head>
<body class="login-page">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Body Container-->
        <!--Page Header-->
        <div class="page-header" th:style="|background-image: url(@{/assets/images/page-header/page-banner2.jpg})|">
            <div class="page-title"><h1>Sign In Account</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs"><a href="/" title="Back to the home page"><i
                            class="an an-home icon-home"></i></a> <span aria-hidden="true"><i
                            class="an an-angle-right"></i></span> <span>Sign In Account</span></div>
                </div>
            </div>
            <!--End Breadcrumbs-->
        </div>
        <!--End Page Header-->
        <div class="container">
            <div class="row">
                <!--Main Content-->
                <!-- 注册区域 -->
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 box" id="register-section">
                    <div class="mb-4">
                    <h3>New Customers</h3>
                        <p>Create an account to enjoy faster checkout and track your orders.</p>
                        <form id="RegisterForm" class="contact-form">
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <div class="form-group">
                                        <label for="RegisterUserName">Username <span class="required">*</span></label>
                                        <input type="text" name="username" placeholder="请输入用户名"
                                               id="RegisterUserName" class="" required>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="form-group">
                                        <label for="RegisterPassword">Password <span class="required">*</span></label>
                                        <input type="password" name="password" placeholder="请输入密码"
                                               id="RegisterPassword" class="" required>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="form-group">
                                        <label for="RegisterConfirmPassword">Confirm Password <span class="required">*</span></label>
                                        <input type="password" name="checkPassword" placeholder="请确认密码"
                                               id="RegisterConfirmPassword" class="" required>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button id="register-btn" type="button" class="btn mb-3">Create Account</button>
                                    <div id="register-message" class="alert" style="display: none;"></div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- 登录区域 -->
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 box" id="login-section">
                    <div class="mb-4">
                            <h3>Registered Customers</h3>
                            <p>If you have an account with us, please log in.</p>
                        <form id="CustomerLoginForm" class="contact-form">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3">
                                    <div class="form-group">
                                        <label for="CustomerEmail">Account <span class="required">*</span></label>
                                        <input type="text" name="account" placeholder="用户名/手机号/邮箱"
                                               id="CustomerEmail" class="" autofocus required>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3">
                                    <div class="form-group">
                                        <label for="CustomerPassword">Password <span class="required">*</span></label>
                                        <input type="password" name="password" placeholder="请输入密码"
                                               id="CustomerPassword" class="" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="text-left col-12 col-sm-12 col-md-12 col-lg-12">
                                    <button id="login-btn" type="button" class="btn mb-3">Sign In</button>
                                    <div id="login-message" class="alert" style="display: none;"></div>
                                    <p class="mb-4">
                                        <a href="#">Forgot your password?</a>
                                    </p>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!--End Main Content-->
            </div>

        </div><!--End Body Container-->

    </div><!--End Page Wrapper-->

    <!--Footer-->
    <div class="footer footer-1">
        <div class="footer-top clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 about-us-col">
                        <img src="assets/images/logo-white.png" alt="ShopLook"/>
                        <p>55 Gallaxy Enque, 2568 steet,<br>23568 NY</p>
                        <p><b>Phone</b>: (440) 000 000 0000</p>
                        <p><b>Email</b>: <a href="mailto:sales@yousite.com">sales@yousite.com</a></p>
                        <ul class="list--inline social-icons">
                            <li><a href="#"><i class="icon an an-facebook-f"></i></a></li>
                            <li><a href="#"><i class="icon an an-twitter"></i></a></li>
                            <li><a href="#"><i class="icon an an-pinterest-p"></i></a></li>
                            <li><a href="#"><i class="icon an an-instagram"></i></a></li>
                            <li><a href="#"><i class="icon an an-youtube"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Quick Shop</h4>
                        <ul>
                            <li><a href="#">Home Appliances</a></li>
                            <li><a href="#">Phones &amp; Tablet</a></li>
                            <li><a href="#">Audio &amp; Video</a></li>
                            <li><a href="#">Digital Cameras</a></li>
                            <li><a href="#">Accessories</a></li>
                            <li><a href="#">Computer &amp; Laptop</a></li>
                            <li><a href="#">Game &amp; Video</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Informations</h4>
                        <ul>
                            <li><a th:href="@{/login}">Login</a></li>
                            <li><a th:href="@{/my-account}">My Account</a></li>
                            <li><a th:href="@{/cart}">View Cart</a></li>
                            <li><a href="#">Privacy policy</a></li>
                            <li><a href="#">Shipping &amp; Returns</a></li>
                            <li><a href="#">Terms &amp; condition</a></li>
                            <li><a href="#">404 Page</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Customer Services</h4>
                        <ul>
                            <li><a href="blog-left-sidebar.html">Blog</a></li>
                            <li><a href="aboutus-style1.html">About us</a></li>
                            <li><a href="faqs-style1.html">FAQ's</a></li>
                            <li><a href="contact-style1.html">Contact Us</a></li>
                            <li><a href="#">Orders and Returns</a></li>
                            <li><a href="#">Track My Order</a></li>
                            <li><a href="#">Support Center</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 newsletter-col">
                        <div class="display-table">
                            <div class="display-table-cell footer-newsletter">
                                <form action="#" method="post">
                                    <label class="h4">Sign Up To Our Newsletter</label>
                                    <p>Enter your email to receive daily news and get 20% off coupon for all items.</p>
                                    <div class="input-group">
                                        <input type="email" class="input-group__field newsletter-input" name="EMAIL"
                                               value="" placeholder="Email Your address" required>
                                        <span class="input-group__btn">
                                                    <button type="submit" class="btn btn-secondary newsletter__submit"
                                                            name="commit" id="Subscribe"><span
                                                            class="newsletter__submit-text--large">Subscribe</span></button>
                                                </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom clearfix">
            <div class="container">
                <ul class="payment-icons list--inline">
                    <li><i class="an an-cc-visa" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-mastercard" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-amex" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-paypal" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-discover" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-stripe" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-jcb" aria-hidden="true"></i></li>
                </ul>
                <div class="copytext">
                    &copy; 2022 ShopLook. All Rights By <a href="http://www.bootstrapMB.com">bootstrapMB</a>.
                </div>
            </div>
        </div>
    </div>
    <!--End Footer-->

    <!--Scoll Top-->
    <span id="site-scroll"><i class="icon an an-arrow-up"></i></span>
    <!--End Scoll Top-->

    <!--MiniCart Drawer-->
    <div class="minicart-right-drawer modal right fade" id="minicart-drawer">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div id="cart-drawer" class="block block-cart">
                    <a href="javascript:void(0);" class="close-cart" data-bs-dismiss="modal" aria-label="Close"><i
                            class="an an-times"></i></a>
                    <h4>Your cart (3 Items)</h4>
                    <div class="minicart-content">
                        <ul class="clearfix">
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img1.jpg"
                                         data-src="assets/images/product-images/cart-page-img1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Acer NX.MVMSI.035 Intel Core i3
                                        15.6 inches Laptop</a>
                                    <div class="variant-cart">Black / XL</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$59.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img2.jpg"
                                         data-src="assets/images/product-images/cart-page-img2.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Canon CSG-QX10 Full Shot Lens</a>
                                    <div class="variant-cart">Red / S</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$89.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/elt-p-18-1.jpg"
                                         data-src="assets/images/product-images/elt-p-18-1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Fully Automatic Washing Machine</a>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$1189.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="minicart-bottom">
                        <div class="subtotal list">
                            <span>Shipping:</span>
                            <span class="product-price">$10.00</span>
                        </div>
                        <div class="subtotal list">
                            <span>Tax:</span>
                            <span class="product-price">$05.00</span>
                        </div>
                        <div class="subtotal">
                            <span>Total:</span>
                            <span class="product-price">$93.13</span>
                        </div>
                        <div class="row mt-3 mb-3">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6 pr-0">
                                <a href="checkout-style2.html" class="btn proceed-to-checkout">Go to Checkout</a>
                            </div>
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                <a href="cart-style1.html" class="btn btn-secondary cart-btn">View Cart</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End MiniCart Drawer-->

    <!-- Including Jquery -->
    <script th:src="@{/assets/js/vendor/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/assets/js/vendor/js.cookie.js}"></script>
    <!--Including Javascript-->
    <script th:src="@{/assets/js/plugins.js}"></script>
    <script th:src="@{/assets/js/main.js}"></script>

    <script th:inline="javascript">
        //上下文路径
        let ctx = /*[[@{/}]]*/"";
        if (ctx.endsWith("/")) {
            ctx = ctx.substring(0, ctx.length - 1);
        }

        $(document).ready(function() {
            // 登录功能
            $('#login-btn').click(function() {
                const account = $('#CustomerEmail').val().trim();
                const password = $('#CustomerPassword').val().trim();
                
                if (!account || !password) {
                    showMessage('#login-message', 'error', '请输入账号和密码');
                    return;
                }

                // 显示加载状态
                $(this).prop('disabled', true).text('登录中...');
                
                $.ajax({
                    url: ctx + '/user/login',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        account: account,
                        password: password
                    }),
                    success: function(result) {
                        if (result.success) {
                            showMessage('#login-message', 'success', result.msg || '登录成功');
                            // 延迟跳转到首页
                            setTimeout(function() {
                                window.location.href = ctx + '/';
                            }, 1000);
                        } else {
                            showMessage('#login-message', 'error', result.msg || '登录失败');
                        }
                    },
                    error: function() {
                        showMessage('#login-message', 'error', '网络错误，请重试');
                    },
                    complete: function() {
                        // 恢复按钮状态
                        $('#login-btn').prop('disabled', false).text('Sign In');
                    }
                });
            });

            // 注册功能
            $('#register-btn').click(function() {
                const username = $('#RegisterUserName').val().trim();
                const password = $('#RegisterPassword').val().trim();
                const checkPassword = $('#RegisterConfirmPassword').val().trim();
                
                if (!username || !password || !checkPassword) {
                    showMessage('#register-message', 'error', '请填写所有字段');
                    return;
                }

                if (password !== checkPassword) {
                    showMessage('#register-message', 'error', '两次输入的密码不一致');
                    return;
                }

                // 显示加载状态
                $(this).prop('disabled', true).text('注册中...');

                            $.ajax({
                    url: ctx + '/user/register',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        username: username,
                        password: password,
                        checkPassword: checkPassword
                    }),
                    success: function(result) {
                        if (result.success) {
                            showMessage('#register-message', 'success', result.msg || '注册成功');
                            // 清空注册表单
                            $('#RegisterForm')[0].reset();
                    } else {
                            showMessage('#register-message', 'error', result.msg || '注册失败');
                    }
                    },
                    error: function() {
                        showMessage('#register-message', 'error', '网络错误，请重试');
                    },
                    complete: function() {
                        // 恢复按钮状态
                        $('#register-btn').prop('disabled', false).text('Create Account');
                    }
                });
            });

            // 表单回车提交
            $('#CustomerLoginForm input').keypress(function(e) {
                if (e.which == 13) {
                    $('#login-btn').click();
                }
            });

            $('#RegisterForm input').keypress(function(e) {
                if (e.which == 13) {
                    $('#register-btn').click();
                }
            });
        });

        // 显示消息的通用函数
        function showMessage(selector, type, message) {
            const $msg = $(selector);
            $msg.removeClass('alert-success alert-danger alert-warning')
                .addClass('alert-' + (type === 'success' ? 'success' : 'danger'))
                .html(message)
                .show();
            
            // 3秒后自动隐藏
            setTimeout(function() {
                $msg.fadeOut();
            }, 3000);
        }
    </script>
</div>
</body>
</html>
